<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>js宽高测试</title>
		<style type="text/css">
			body {
				border: solid #ccc;
				border-left-width: 20px;
				border-top-width: 10px;
				border-right-width: 5px;
				border-bottom-width: 8px;
				margin: 10px;
				padding: 40px;
				background: #eee;
				height: 350px;
				width: 500px;
				overflow: scroll;
			}
			
			#div1 {
				width: 200px;
				height: 200px;
				background: #D9534F;
				border: 1px solid #000;
				overflow: auto;
				/*overflow-x: scroll;*/
			}
		</style>
	</head>

	<body>
		<div id="div1">的就撒卡的很撒即可的就撒卡的很撒即可电话骄傲收到货首都航空江安河德生科技安徽大家深刻回答安居客的灰色空间的数据库啥的华接电话的啥的空间哈市地税局肯定会就开始大家看好的教科书的家收到货的萨科技的好抠脚大汉金黄色的刷卡黄金时代的就撒卡的很撒即可电话骄傲收到货首都航空江安河德生科技安徽大家深刻回答安居客的灰色空间的数据库啥的华接电话的啥的空间哈市地税局肯定会就开始大家看好的教科书的家收到货的萨科技的好抠脚大汉金黄色的刷卡黄金时代的就撒卡的很撒即可电话骄傲收到货首都航空江安河德生科技安徽大家深刻回答安居客的灰色空间的数据库啥的华接电话的啥的空间哈市地税局肯定会就开始大家看好的教科书的家收到货的萨科技的好抠脚大汉金黄色的刷卡黄金时代的就撒卡的很撒即可电话骄傲收到货首都航空江安河德生科技安徽大家深刻回答安居客的灰色空间的数据库啥的华接电话的啥的空间哈市地税局肯定会就开始大家看好的教科书的家收到货的萨科技的好抠脚大汉金黄色的刷卡黄金时代电话骄傲收到货首都航空江安河德生科技安徽大家深刻回答安居客的灰色空间的数据库啥的华接电话的啥的空间哈市地税局肯定会就开始大家看好的教科书的家收到货的萨科技的好抠脚大汉金黄色的刷卡黄金时代的就撒卡的很撒即可的就撒卡的很撒即可电话骄傲收到货首都航空江安河德生科技安徽大家深刻回答安居客的灰色空间的数据库啥的华接电话的啥的空间哈市地税局肯定会就开始大家看好的教科书的家收到货的萨科技的好抠脚大汉金黄色的刷卡黄金时代的就撒卡的很撒即可电话骄傲收到货首都航空江安河德生科技安徽大家深刻回答安居客的灰色空间的数据库啥的华接电话的啥的空间哈市地税局肯定会就开始大家看好的教科书的家收到货的萨科技的好抠脚大汉金黄色的刷卡黄金时代的就撒卡的很撒即可电话骄傲收到货首都航空江安河德生科技安徽大家深刻回答安居客的灰色空间的数据库啥的华接电话的啥的空间哈市地税局肯定会就开始大家看好的教科书的家收到货的萨科技的好抠脚大汉金黄色的刷卡黄金时代的就撒卡的很撒即可电话骄傲收到货首都航空江安河德生科技安徽大家深刻回答安居客的灰色空间的数据库啥的华接电话的啥的空间哈市地税局肯定会就开始大家看好的教科书的家收到货的萨科技的好抠脚大汉金黄色的刷卡黄金时代电话骄傲收到货首都航空江安河德生科技安徽大家深刻回答安居客的灰色空间的数据库啥的华接电话的啥的空间哈市地税局肯定会就开始大家看好的教科书的家收到货的萨科技的好抠脚大汉金黄色的刷卡黄金时代</div>
		<script type="text/javascript">
			//window相关宽高

			//console.log(innerHeight);//浏览器内部的高度（不加导航栏，不加控制台）IE9+
			//console.log(innerWidth);//浏览器内部的宽度（不带浏览器边框）IE9+
			//console.log(outerHeight);//浏览器外部高度（加导航栏）IE9+
			//console.log(outerWidth);//浏览器内部宽度（不加浏览器边框）IE9+

			//一般情况下，screen需要小写，大写的Screen是一个方法

			//console.log(screen.width);//屏幕宽度（固定值）
			//console.log(screen.height);//屏幕高度（固定值）
			//console.log(screen.availWidth);//屏幕可利用宽度（固定值）
			//console.log(screen.availHeight);//屏幕可利用高度（固定值）
			//console.log(screenLeft);//浏览器距离左边距离
			//console.log(screenTop);//浏览器距离上边距离

			//document相关宽高
			//			console.log(document.body.clientWidth);//580（500 + 40 + 40）
			//			console.log(document.body.clientHeight);//430（350 + 40 + 40）

			//			var div1 = document.getElementById('div1');
			//			console.log(div1.clientWidth);
			//			console.log(div1.clientHeight);
			//windows系统
			//没有滚动条的情况下，分别为200,200;
			//有纵向滚动条：183,200
			//有横向滚冻条：200,183

			//!mac系统，滚动轴不占宽高

			//			console.log(document.body.clientLeft); //读取元素左边框宽度
			//			console.log(document.body.clientTop); //读取元素上边框宽度
			
//			console.log(document.body.offsetWidth);//605
//			console.log(document.body.offsetHeight);//448
//			console.log(document.body.offsetLeft);//0
//			console.log(document.body.offsetTop);//0


			
		</script>
	</body>

</html>